<template>
  <div class="">
    <myHeader @isShouTap="isShouTap"></myHeader>
    <list v-for="(v, i) in obj.data.cartData" :key="i" :item="v"></list>
    <MyFooter></MyFooter>

    <div v-show="isShow" class="right">
      <p>关键字搜索</p>
      <div class="search">
        <u
          :class="indexFlag == i ? 'active' : ''"
          v-for="(v, i) in title"
          :key="i"
          @click="local(v, i)"
          >{{ v }}
        </u>
      </div>
      <div class="button">
        <button @click="isShouTap">取消</button>
        <button @click="search">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
import myHeader from "../components/myHeader.vue";
import list from "../components/list.vue";
import MyFooter from "../components/MyFooter.vue";
import { useStore } from "vuex";
import { computed, reactive, ref } from "vue";
export default {
  setup(props) {
    let store = useStore();
    let isShow = ref(false);
    let title = reactive(["海信", "海尔", "山水", "美的"]);
    let indexFlag = ref(-1);
    store.dispatch("getList");
    let obj = computed(() => store.state.objList);
    function isShouTap() {
      isShow.value = !isShow.value;
    }
    function local(value, i) {
      indexFlag.value = i;
      store.commit("local", value);
    }
    function search() {
      store.commit("search");
    }
    return {
      obj,
      isShow,
      isShouTap,
      local,
      title,
      search,
      indexFlag,
    };
  },

  components: {
    myHeader,
    list,
    MyFooter,
  },
};
</script>

<style lang="scss" scoped>
.right {
  width: 50%;
  height: 100%;
  position: fixed;
  background-color: #fff;
  top: 0;
  right: 0;
}

u {
  margin: 10px;
  width: 50px;
  height: 30px;
  line-height: 30px;
  text-decoration: none;
  text-align: center;
  display: inline-block;

  background-color: #ccc;
}
.active {
  border: 2px solid rgb(23, 136, 201);
}
</style>
